<!--hmc 标签选择组件-->
<template>
  <div class="container">
    <div>
      <p class="font20 color333 mb30">标签选择</p>
      <el-form
        :model="dataForm"
        size="mini"
        ref="dataForm"
        :rules="dataFormRules"
        class="tagSelectionForm"
      >
        <el-form-item label="名称：" prop="name" label-width="92px">
          <el-input
            clearable
            v-model="dataForm.name"
            placeholder
            size="mini"
            minlength="1"
            maxlength="10"
            style="width:296px"
            class="mr10"
          ></el-input>
          <span class="desc">提示:请输入1-10个字符</span>
        </el-form-item>
        <el-form-item label="标签选择：" class="w178 flex mt30" required>
          <div class="border">
            <div class="mb10">
              <el-form :inline="true" :model="filters" size="mini" ref="filters">
                <div class=" w100">
                  <el-form-item label="标签类型：" prop="labelType" class="noMargin">
                    <el-select v-model="filters.labelType" placeholder="全部" size="mini" class="w194">
                      <el-option
                        v-for="item in typeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="标签值：" prop="labelName" class="mr220 noMargin">
                    <el-input v-model="filters.labelName" maxlength="80" placeholder="请输入标签值" class="w194"
                              clearable></el-input>
                  </el-form-item>
                  <el-form-item class="f_r btns noMargin">
                    <el-button size="mini" @click="resetForm" class="resetButton" icon="el-icon-refresh">重置</el-button>
                    <el-button class="searchButton" size="mini" icon="el-icon-search" @click="search">搜索
                    </el-button>
                  </el-form-item>
                </div>
              </el-form>
            </div>
            <div class="w100 t_r mb10">
              <!--<el-button type="primary" disabled plain size="mini">可选标签</el-button>-->
              <el-button class="searchButton" size="mini" @click="lookLabelAdded">查看已添加标签({{labelAdded.length}})
              </el-button>
            </div>
            <el-table :data="tableData"   v-loading="loading">
              <el-table-column width="55" align="center" label="">
                <template slot-scope="scope">
                  <el-checkbox @change="changeLabel(scope.row,scope.$index)" v-model="scope.row.checked"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column align="center" label="标签值" prop="labelName">
                <template slot-scope="scope">
                  <span>{{scope.row.labelName==null||scope.row.labelName==''?'-':scope.row.labelName}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="标签名" prop="firstLabelName">
                <template slot-scope="scope">
                  <span>{{scope.row.firstLabelName==null||scope.row.firstLabelName==''?'-':scope.row.firstLabelName}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="标签属性" prop="secondLabelName">
                <template slot-scope="scope">
                  <span>{{scope.row.secondLabelName==null||scope.row.secondLabelName==''?'-':scope.row.secondLabelName}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="标签类型" prop="labelType"
                               :formatter="typeFormatter"></el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" v-if="!scope.row.checked" @click="addLabel(scope.row,scope.$index)">添加
                  </el-button>
                  <el-button type="text" v-if="scope.row.checked" disabled>已添加</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!--分页栏-->
            <div class="toolbar t_r">
              <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="refreshPageRequest"
                @size-change="handleSizeChange"
                :current-page="pageRequest.pageNum"
                :page-size="pageRequest.pageSize"
                :total="tableTotal"
                :page-sizes="[5, 15, 25, 30]"
              ></el-pagination>
            </div>
          </div>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer t_c mt30">
        <!-- <el-button class="cancelButton mr90"  @click="handleClose">取消</el-button> -->
        <el-button @click="addLabelCheck1" class="searchButton">确定</el-button>
      </div>
    </div>
    <!-- 查看已添加标签 -->
    <el-dialog :visible.sync="viewDlg" title="查看已添加标签" append-to-body :close-on-click-modal="false"
               class="checkAddedTags">
      <div>
        <el-form :inline="true" :model="lookFilters" size="mini" ref="lookFilters">
          <el-form-item label="标签类型：" prop="labelType" class="w178">
            <el-select v-model="lookFilters.labelType" placeholder="全部" size="mini">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签值：" prop="labelName" class="w178">
            <el-input v-model="lookFilters.labelName" maxlength="80" placeholder="请输入标签值"
                      clearable></el-input>
          </el-form-item>
        </el-form>
        <el-row class="mb30 mt20 t_r">
          <el-button size="mini" @click="resetForm1" class="resetButton" icon="el-icon-refresh">重置</el-button>
          <el-button class="searchButton" icon="el-icon-search" @click="search1">搜索</el-button>
          <el-button class="searchButton" @click="addLabelCheck">开始筛选</el-button>
        </el-row>
      </div>
      <el-table :data="tableDataAdded"   v-loading="loading">
        <el-table-column align="center" label="标签值" prop="labelName">
          <template slot-scope="scope">
            <span>{{scope.row.labelName==null||scope.row.labelName==''?'-':scope.row.labelName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签名" prop="firstLabelName">
          <template slot-scope="scope">
            <span>{{scope.row.firstLabelName==null||scope.row.firstLabelName==''?'-':scope.row.firstLabelName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签属性" prop="secondLabelName">
          <template slot-scope="scope">
            <span>{{scope.row.secondLabelName==null||scope.row.secondLabelName==''?'-':scope.row.secondLabelName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签类型" :formatter="typeFormatter" prop="labelType"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteLabelAdded(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页栏-->
      <div class="toolbar t_r">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="refreshPageRequest1"
          @size-change="handleSizeChange1"
          :current-page="pageRequest1.pageNum"
          :page-size="pageRequest1.pageSize"
          :total="tableTotalAdded"
          :page-sizes="[5, 15, 20, 25]"
        ></el-pagination>
      </div>

      <div slot="footer" class="dialog-footer t_c">
        <el-button class="searchButton" @click="viewDlg=false" type="primary">确定</el-button>
      </div>
    </el-dialog>
    <!-- 筛选弹框 -->
    <el-dialog
      class="el-dialog-style"
      :inline="true"
      :visible.sync="filterDlg"
      append-to-body
      :close-on-click-modal="false"
      title="筛选结果"
    >
      <div>
        <p class="w100 t_c mb40">
          共为您筛选出
          <span>{{memberNumber}}</span>
          名会员
        </p>
        <div class="w100 t_c">
          <el-button class="searchButton" @click="saveLabelData1">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 保存弹框 -->
    <el-dialog
      class="el-dialog-style"
      :inline="true"
      :visible.sync="saveDlg"
      append-to-body
      :close-on-click-modal="false"
      title="提示"
    >
      <div>
        <p class="font16 color333 mb40">该标签组当前筛选出的用户数为0，是否确认保存？</p>
        <el-row class="w100 t_c">
          <el-button class="cancelButton mr60" @click="saveDlg=false">取消</el-button>
          <el-button class="searchButton" @click="saveLabelData">确定</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // 自动化营销-----标签选择组件
  export default {
    name: "selection",
    data() {
      return {
        loading:false,
        memberNumber: 0,//删选出的会员数
        //已添加标签 过滤Form表单
        lookFilters: {
          labelType: "",
          labelName: "",
        },
        //标签选择 过滤Form表单
        filters: {
          labelType: "",
          labelName: "",
        },
        labelAdded: [],//已添加的标签
        //查看已添加标签 弹框
        viewDlg: false,
        //开始筛选 弹框
        filterDlg: false,
        // 保存弹框
        saveDlg: false,
        tableData: [],
        tableDataAdded: [],
        dataForm: {
          name: "",
        },
        //翻页
        pageRequest: {
          pageNum: 1,
          pageSize: 5
        },
        //翻页
        pageRequest1: {
          pageNum: 1,
          pageSize: 5
        },
        //翻页 总条目数
        tableTotal: 0,
        //翻页 总条目数
        tableTotalAdded: 0,
        //标签类型
        typeList: [{value: '1', label: '模型标签'}, {value: '2', label: '自定义标签'}],
        //select 值
        value: "",
        //form规则
        dataFormRules: {
          name: [
            {required: true, message: "请输入活动名称", trigger: "blur"},
            {min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur"}
          ]
        }
      };
    },
    components: {},

    props: {
      nodeInfo: {
        type: Object,
      },
      journeyId: {
        type: String,
        default: '',
      }
    },

    methods: {
      //搜索
      search1:function(){
        this.pageRequest1.pageNum=1
        this.getAddedLabel()
      },
      //搜索
      search:function(){
        this.pageRequest.pageNum=1
        this.getAllLabelByDeptId()
      },
      changeLabel: function (row, index) {
        if (row.checked) {
          this.addLabel(row, index)
        } else {
          this.deleteLabelAdded(row.id)
        }

      },
      // 点击确定按钮执行自己的逻辑后将编辑的数据返回给页面
      save() {
        this.saveLabelData('1');
      },

      // // 将编辑的数据回调页面
      // saveLabelData(data) {
      //   this.$emit("saveLabelData",data);
      // },
      saveLabelData1: function () {
        this.filterDlg = false
      },
      //保存添加的标签
      saveLabelData: function () {
        let this_ = this
        let params = {}
        params.id = this_.nodeInfo.nodeId
        let param = {}
        param.name = this_.dataForm.name
        let tripLabelRequestList = []
        this_.labelAdded.forEach(item => {
          let obj = {}
          obj.labelId = item
          tripLabelRequestList.push(obj)
        })
        param.tripLabelRequestList = tripLabelRequestList
        params.nodeVariable = JSON.stringify(param)
        this_.utils.request.updateBranchNode(params, function (res) {
          if (res.code == "0000") {
            this_.saveDlg = false
            this_.filterDlg = false
            this_.$message({message: "操作成功", type: "success"});
            this_.$emit("saveLabelData", {nodeName: param.name});
          } else {
            this_.$message({message: "操作失败, " + res.msg, type: "error"});
          }
        });
      },
      addLabelCheck1: function () {
        let this_ = this
        this_.$refs.dataForm.validate(valid => {
          if (valid) {
            if (this_.labelAdded.length == 0) {
              this_.$message({message: "请添加标签", type: "warning"});
              return false
            }
            let tripLabelRequestList = []
            let param1 = {}
            this_.labelAdded.forEach(item => {
              let obj = {}
              obj.labelId = item
              obj.behaviorValue = ""
              tripLabelRequestList.push(obj)
            })
            param1.tripLabelRequestList = tripLabelRequestList
            //筛选当前添加标签的会员数量
            this_.utils.request.queryMemberIds(param1, function (res) {
              if (res.code == "0000" && res.data.length == 0) {
                this_.saveDlg = true
              } else if (res.code == "0000" && res.data.length > 0) {
                this_.saveLabelData()
              } else {
                this_.$message({message: "操作失败, " + res.msg, type: "error"});
              }
            });
          } else {
            this_.$message({message: "请输入名称", type: "warning"});
            return false
          }
        })
      },
      //确定添加的标签
      addLabelCheck: function () {
        let this_ = this
        let tripLabelRequestList = []
        let param1 = {}
        this_.labelAdded.forEach(item => {
          let obj = {}
          obj.labelId = item
          obj.behaviorValue = ""
          tripLabelRequestList.push(obj)
        })
        param1.tripLabelRequestList = tripLabelRequestList
        //筛选当前添加标签的会员数量
        this_.utils.request.queryMemberIds(param1, function (res) {
          if (res.code == "0000") {
            this_.memberNumber = res.data.length
            this_.filterDlg = true
          } else {
            this_.$message({message: "操作失败, " + res.msg, type: "error"});
          }
        });
      },
      //子关闭 标签选择弹框
      handleClose: function () {
        this.$emit("handleClose", false);
      },
      //删除已添加的标签
      deleteLabelAdded: function (id) {
        let this_ = this
        let index = 0
        this_.labelAdded.forEach(item => {
          if (id == item) {
            this_.labelAdded.splice(index, 1)
          }
          index++
        })
        this_.tableData.forEach(item => {
          if (id == item.id) {
            item.checked=false
          }
          index++
        })
        this_.getAddedLabel()
      },
      //查看已添加的标签
      lookLabelAdded: function () {
        let this_ = this

        if (this_.labelAdded.length == 0) {
          this_.$message({message: "请添加标签", type: "warning"});
          return false
        } else {
          this_.viewDlg = true
          this_.getAddedLabel()
        }
      },
      //已添加标签初始化
      getBranchNodeDetail: function () {
        let this_ = this
        let param = {}
        param.branchNodeId = this_.nodeInfo.nodeId
        this.utils.request.getBranchNodeDetail(param, function (res) {
          if (res.code == "0000") {
            if (res.data.nodeVariable != null) {
              JSON.parse(res.data.nodeVariable, function (key, value) {
                if (key == "name" && value != null) {
                  this_.dataForm.name = value;
                }
                if (key == "labelId" && value != null) {
                  this_.labelAdded.push(value)
                }
              })

            }
          } else {

          }
        });
      },

      //添加标签
      addLabel: function (row, index) {
        let this_ = this
        if (this_.labelAdded.length > 0) {
          if (this_.labelAdded.indexOf(row.id) == -1) {
            this_.labelAdded.push(row.id)
            this_.tableData[index].checked = true
          }
        } else {
          this_.labelAdded.push(row.id)
          this_.tableData[index].checked = true
        }

      },
      //标签类型formatter
      typeFormatter: function (row, column, cellValue, index) {
        if (cellValue == "1") {
          return '模型标签'
        } else if (cellValue == "2") {
          return '自定义标签'
        } else {
          return "-"
        }
      },

      //获取已添加标签数据
      getAddedLabel: function (data) {
        let param = {}
        let this_ = this
        if (data != null && data.start != null) {
          if (data.start != null) {
            this.pageRequest1.pageNum = data.start;
          }
          if (data.limit != null) {
            this.pageRequest1.pageSize = data.limit;
          }
        }
        if (this_.lookFilters == undefined || this_.lookFilters == null) {
          this_.lookFilters = {};
        }
        this_.lookFilters.start = this_.pageRequest1.pageNum;
        this_.lookFilters.limit = this_.pageRequest1.pageSize;
        this_.lookFilters.labelIds = this_.labelAdded;
        this_.loading=true;
        this.utils.request.getAddedLabel(this_.lookFilters, function (res) {
          if (res.code == "0000") {
            this_.tableDataAdded = res.data.rows
            this_.tableTotalAdded = res.data.total
          } else {
            this_.tableDataAdded = []
            this_.tableTotalAdded = 0
          }
          this_.$nextTick(()=>{
            this_.loading=false;
          })
        });
      },

      //获取标签数据
      getAllLabelByDeptId: function (data) {
        let param = {}
        let this_ = this
        if (data != null && data.start != null) {
          if (data.start != null) {
            this.pageRequest.pageNum = data.start;
          }
          if (data.limit != null) {
            this.pageRequest.pageSize = data.limit;
          }
        }
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = this.pageRequest.pageNum;
        this_.filters.limit = this.pageRequest.pageSize;
        this_.loading=true;
        this.utils.request.getAllLabelByDeptId(this_.filters, function (res) {
          if (res.code == "0000") {
            res.data.rows.forEach(item => {
                item.checked = false
              this_.labelAdded.forEach(item1=>{
                if(item.id==item1){
                  item.checked = true
                  return;
                }
              })
            })
            this_.tableData = res.data.rows
            this_.tableTotal = res.data.total
          } else {
            this_.tableData = []
            this_.tableTotal = 0
          }
          this_.$nextTick(()=>{
            this_.loading=false;
          })
        });
      },
      // 每页数据刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.getAllLabelByDeptId()

      },
      // 每页条数刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.getAllLabelByDeptId()
      },

      // 每页数据刷新
      refreshPageRequest1: function (pageNum) {
        this.pageRequest1.pageNum = pageNum;
        this.getAddedLabel()

      },
      // 每页条数刷新
      handleSizeChange1: function (pageSize) {
        this.pageRequest1.pageSize = pageSize;
        this.getAddedLabel()
      },
      //表单重置
      resetForm: function () {
        if (this.filters.labelType == "" && this.filters.labelName == "") {
          this.$message({message: "请输入查询条件", type: "warning"});
          return false
        }
        this.filters = {
          labelType: "",
          labelName: "",
        }
        this.pageRequest.pageNum=1
        this.getAllLabelByDeptId()
      },

      //表单重置
      resetForm1: function () {
        if (this.lookFilters.labelType == "" && this.lookFilters.labelName == "") {
          this.$message({message: "请输入查询条件", type: "warning"});
          return false
        }
        this.lookFilters = {
          labelType: "",
          labelName: "",
        }
        this.pageRequest1.pageNum=1
        this.getAddedLabel()
      }


    },

    created() {
    },
    mounted() {
      this.getAllLabelByDeptId()
      this.getBranchNodeDetail()
    }
  };
</script>
<style lang="scss" scoped>
  // .wrap {
  //   .flex {
  //     display: flex;
  //     justify-content: flex-start;
  //     align-items: top;
  //     &.mt30 {
  //       margin-top: 30px;
  //     }
  //     &.label {
  //       margin-bottom: 10px;
  //       justify-content: space-between;
  //       .el-button {
  //         margin: 0;
  //       }
  //     }
  //   }
  //   .border {
  //     padding: 0 2% 30px;
  //     border: 1px solid #dcdfe6;
  //     .el-form-item {
  //       padding-top: 30px;
  //     }
  //   }
  // }

  // /deep/ .el-dialog {
  //   .el-dialog__header {
  //     text-align: center;
  //   }
  //   .el-dialog__footer {
  //     .el-button + .el-button {
  //       margin-left: 10px;
  //     }
  //   }
  // }
  .desc {
    color: #C4C4C4;
    font-size: 12px;
  }

  // //开始筛选的样式
  // .el-dialog-style {
  //   /deep/ .el-dialog {
  //     .el-dialog__header {
  //       display: none;
  //     }
  //     .el-dialog__body {
  //       text-align: center;
  //       p {
  //         margin-bottom: 30px;
  //         span {
  //           color: #409eff;
  //         }
  //       }
  //     }
  //   }
  // }
  .border {
    // width: 1004px;
    border: 1px solid #999999;
    border-radius: 4px;
    padding: 30px;
  }

  // .mr220{
  //   margin-right: 220px !important;
  // }
  .btns {
    /deep/ .el-form-item__content {
      margin-right: 0 !important;
    }
  }

  .mb10 {
    margin-bottom: 10px !important;
  }

  .mr90 {
    margin-right: 90px !important;
  }

  /deep/ .el-pagination {
    .el-input__inner {
      width: 100% !important;
    }
  }

  .checkAddedTags {
    /deep/ .el-dialog__header {
      text-align: center;
    }
  }

  /deep/ .w194 {
    width: 194px !important;
    .el-input__inner {
      width: 194px !important;
    }
  }

  /deep/ .noMargin {
    margin-right: 0 !important;
  }

  .mb10 {
    margin-bottom: 10px !important;
  }

  .tagSelectionForm {
    /deep/ .el-button {
      margin-left: 10px !important;
    }
  }

  .dialogSelector {
    /deep/ .el-select-dropdown {
      left: 587px !important;
      top: 312px !important;
    }
  }
</style>

